<template>
  <div>
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
    >
      <!-- 作用域插槽 text 本身是每一列的所有属性 但是 column的配置是 dataIndex 是avaurl 所以text 就变成了每一类的avarurl -->
      <img
        style="width: 50px; height: 50px; border-radius: 50%"
        slot="pic"
        slot-scope="text"
        :src="text"
      />
    </a-table>
  </div>
</template>
<script>
const columns = [
  // title:列名; dataIndex: 对应数据源中的键值(kay)
  {
    title: "头像",
    dataIndex: "avatarUrl",
    fixed: "left",
    key: "pic",
    scopedSlots: { customRender: "pic" },
  },
  {
    title: "姓名",
    dataIndex: "name",
  },

  {
    title: "分数",
    dataIndex: "score",
  },

  {
    title: "总分",
    dataIndex: "correctNum",
  },
  {
    title: "答对数",
    dataIndex: "totalScore",
  },
  {
    title: "总题数",
    dataIndex: "totalNum",
  },
];
const data = [];
export default {
  props: ["record"],
  data() {
    return {
      data,
      columns,
      pagination: {
        position: "bottom",
        pageSize: 10,
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "15", "20", "25"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
      },
    };
  },
  created() {
    this.searchRole();
  },
  methods: {
    // 点击分页切换
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;

      let that = this;
      that.sortedInfo = sorter;
      const pager = { ...that.pagination };
      pager.current = pagination.current;
      that.pagination = pager;
      this.searchRole();
    },
    async searchRole() {
      console.log("123", this.record);
      const { data: res } = await this.$http.get(
        `/admin/exam/detail/${this.record.id}?page=${this.pagination.current}&size=${this.pagination.pageSize}`
      );
      console.log(res.data);
    },
  },
  computed: {
    //   表格选中的配置项
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          let ids = [];
          selectedRows.forEach((item) => {
            ids.push(item.id);
          });
          this.idList = ids;
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
};
</script>
<style  lang='less' scoped>
</style>